<template>
  <div class="app-container">
    <FormAuditFilter @on-filter="submitFilterForm" />
    <div style="padding: 20px 0">
      <!-- <el-button-group>
        <el-button v-if="roleCheck('repair-audit-batch')" size="mini" type="primary" @click="multipleOpc">批量审核</el-button>
      </el-button-group> -->
      <el-button-group>
        <el-button size="mini" type="primary"  icon="el-icon-download" @click="exportHandle">导出</el-button>
      </el-button-group>
    </div>
    <el-table
      border
      @selection-change="handleSelectionChange"
      :data="tableData.list"
      v-loading="loading"
      element-loading-text="加载中..."
      class="el-table-align-center"
    >
       <el-table-column
         type="selection"
         :selectable="defaultSelect"
         width="55"
       >
      </el-table-column>
      <el-table-column label="提交申请时间" prop="sucReqTime" width="180" align="center">
        <template slot-scope="{row}">
          {{row.sucReqTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="充值单号" prop="orderId" width="180" align="center">
      </el-table-column>
<!--      <el-table-column label="第三方单号" prop="thirdOrderId" width="180" align="center">-->
<!--      </el-table-column>-->
      <el-table-column label="账号类型" prop="userType" align="center">
        <template slot-scope="{row}">
          {{getLabel(row.userType, payEnum.USER_TYPE)}}
        </template>
      </el-table-column>
      <el-table-column label="账户名" prop="username" align="center">
      </el-table-column>
      <el-table-column label="姓名" prop="reallyName" align="center">
      </el-table-column>
      <el-table-column sortable label="充值金额 " width="120" prop="amount" align="center">
        <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>
      <el-table-column sortable label="手续费 " width="120" prop="fee" align="center">
        <template slot-scope="{row}">
          {{row.fee | currency('', 2, {type: 1})}}
        </template>
      </el-table-column>
      <el-table-column sortable label="实际金额" width="120" prop="amountWithoutFee" align="center">
        <template slot-scope="{row}">
          {{((row.sucStatus==1||row.sucStatus==2)?row.sucApvAmount:row.sucReqAmount) | currency}}
        </template>
      </el-table-column>
      <el-table-column label="存款类型" width="90" align="center">
        <template slot-scope="{row}">
          {{getLabel(row.limitType, payEnum.DEPOSIT_TYPE)}}
        </template>
      </el-table-column>
      <el-table-column label="入款类型" width="90" align="center">
        <template slot-scope="{row}">
          {{row.paymentName}}
        </template>
      </el-table-column>
      <el-table-column label="申请人" prop="sucReqOperator" align="center">
      </el-table-column>
      <el-table-column label="审核人" prop="sucApvOperator" align="center">
      </el-table-column>
      <el-table-column label="审核时间" prop="sucApvTime" align="center" width="180">
        <template slot-scope="{row}">
          {{row.sucApvTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" align="center">
        <template slot-scope="{row}">
          {{row.sucStatus | toConverter('REORDER_AUDIT_STATUS')}}
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="sucApvRemark" align="center">
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="80" align="center">
        <template slot-scope="{row}">
          <el-button
            type="warning"
            size="mini"
            @click="openAuditDialog(row)"
            v-if="row.sucStatus ===  0 && roleCheck('repair-audit-single') && dataRoleCheck(dataPermissionObj[row.limitType])"
          >
            审核
          </el-button>
          <span v-else>-</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="gridSizeChange"
        @current-change="gridCurrentChange"
        :current-page="filters.page"
        :page-sizes="gridPageSize"
        :page-size="filters.size"
        :layout="gridLayout"
        :total="tableData.total"
      />
    </div>
    <ReorderAuditDialog
      v-if="dialogName === dialogType.reorderAudit"
      v-model="dialogVisible"
      :row-data="dialogProps"
      :id="dialogProps.id"
      :menuId="menuId"
      @submit="submitFinished"
    />
  </div>
</template>


<script>

// components
import FormAuditFilter from './formAuditFilter';
import ReorderAuditDialog from './reorderAuditDialog';

// mixins
import {
  grid, dialog, handleDownload, constsLabel,
} from '@/build';

// services
import { getRechargeReorders, exportReorderAudit } from '@/services/api/recharge';

const dialogType = {
  reorderAudit: 'reorder-audit-dialog',
};

export default {
  name: 'reorder-audit',
  components: {
    FormAuditFilter,
    ReorderAuditDialog,
  },
  mixins: [grid, dialog, handleDownload, constsLabel],
  data() {
    return {
      tableData: {},
      rowData: {},
      multipleSelection: [],
      filters: {
        page: 1,
        size: 20,
        startTime: moment().format('YYYY-MM-DD 00:00:00'),
        endTime: moment().format('YYYY-MM-DD 23:59:59'),
        userType: -1,
      },
      dialogType,
      dataPermissionObj: {
        0: 'rechargeCommon-audit',
        1: 'rechargeBig-audit',
      },
      menuId: undefined,
    };
  },
  methods: {
    openAuditDialog(row) {
      this.menuId = dataPermission.DATA_PERMISSION[this.dataPermissionObj[row.limitType]];
      this.openDialog({ dialogName: dialogType.reorderAudit, props: row });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    defaultSelect(row) {
      return row.sucStatus === 0;
    },
    multipleOpc() {
      if (!this.multipleSelection.length) {
        this.$notify({
          type: 'warning',
          message: '请先勾选数据',
        });
        return;
      }
      this.openDialog({ dialogName: dialogType.reorderAudit, props: this.multipleSelection });
    },
    exportHandle() {
      const {
        time, startTime, endTime, applicant, auditor, status, username, userType,
      } = this.filters;
      const ajaxData = {
        time, startTime, endTime, applicant, auditor, status, username, userType,
      };
      const filename = '充值补单审核明细报表.csv';
      const header = ['提交申请时间', '充值单号', '账号类型', '账户名', '充值金额',
        '手续费', '实际金额', '申请人', '审核人', '审核时间', '状态', '备注'];
      const filterField = ['sucReqTime', 'orderId', 'userType', 'username',
        'amount', 'fee', 'payAmount', 'sucReqOperator', 'sucApvOperator',
        'sucApvTime', 'sucStatus', 'sucApvRemark'];
      exportReorderAudit(ajaxData).then(([result, data]) => {
        if (result) {
          const exportData = this.responseFormatter(data.list);
          this.export2Excel(header, filterField, exportData, filename);
        } else {
          this.$message({ message: `导出失败,${data.message}`, type: 'warning' });
        }
      });
    },
    responseFormatter(data) {
      data.map((item) => {
        item.sucReqTime = _.toTime(item.sucReqTime);
        item.userType = _.toConverter(item.userType, 'ACCOUNT_TYPE');
        item.amount = _.currency(item.amount);
        item.fee = _.currency(item.fee);
        // item.amountWithoutFee = (item.sucReqAmount - item.fee) < 0 ? 0 : item.sucReqAmount - item.fee
        // item.amountWithoutFee = _.currency(item.amountWithoutFee)
        item.sucApvTime = _.toTime(item.sucApvTime);
        item.sucStatus = _.toConverter(item.sucStatus, 'REORDER_AUDIT_STATUS');
      });
      return data;
    },
  },
  mounted() {
    this.bindGet(getRechargeReorders, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      format: (data) => {
        const { list } = data;
        _.map(list, (item) => {
          item.amountWithoutFee = (item.sucReqAmount - item.fee) < 0 ? 0 : item.sucReqAmount - item.fee;
          return item;
        });

        return { ...data, list };
      },
    });
    this.getAll();
  },
};
</script>

<style scoped>

</style>
